@import '../styles/variable.scss';
@import "../styles/animation.scss";

pagenote-description,pagenote-lights,pagenote-light,pagenote-light-ref,
pagenote-light-anotation,pagenote-snapshots,pagenote-infos,pagenote-dot,
pagenote-line,pagenote-block,pagenote-progress,pagenote-progress-percent,pagenote-annotation{
  display: block;
  box-sizing: border-box;
  font-size: 14px;
}

pagenote-root{
  position: absolute;
  left: 0;
  top: 0;
}

pagenote-inline-block{
  display: inline-block;
}

pagenote-span{
  display: inline;
}
pagenote-p{
  display: block;
  margin: 12px 0;
}

pagenote-action-group{
  display: block;
}

pagenote-icon{
  cursor: pointer;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 1px 3px 1px rgba(60,64,67,.15), 0 1px 2px 0 rgba(60,64,67,.3);
  margin: 2px;
  padding: 2px;
  background: #fff;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  &:hover{
    opacity: 1;
    box-shadow: 0 1px 3px 1px rgba(60,64,67,.15), 0 1px 2px 0 rgba(60,64,67,.3);
  }
  svg{
    width: 20px;
    height: 20px;
    display: block;
  }
  &[data-size="small"]{
    width: 16px;
    height: 16px;
    svg{
      width: 12px;
      height: 12px;
    }
  }
}

light-img,light{
  pagenote-icon{
    fill: var(--bgcolor);
    display: inline-block;
    vertical-align: sub;
  }
}

light-img{
  img{
    outline: 1px dashed var(--bgcolor);
  }
}
light[data-highlight]{
  position: relative;
  font-size: inherit !important;
  font-family: inherit !important;
  // TODO 使用 box-shadow 替代 background
  background-image: linear-gradient(to top, rgba(255,222,93,1) 2px, rgba(255,222,93,0.84) 2px);
  background-image: linear-gradient(to top, var(--bgcolor) 2px, var(--bgcolor) 2px);
  background-size: 100% 2px;
  // border-bottom: 2px solid  rgba(255,222,93,1);
  // border-bottom: 2px solid var(--bgbottomcolor);
  background-repeat: no-repeat;
  background-position: bottom;
  transition: background-size 0.5s ease-out;
  box-sizing: border-box;
  //border-radius: 2px;
  &:hover{
    z-index: 1;
    //opacity: 0.85;
  }
  &[data-lighting='light']{
    // TODO 取消对 display的修改
    display: inline-block;
    animation: headShake $shakeTime ease-in-out;;
  }
  &[data-active='1']{
    background-size: 100% calc(2em);
    -webkit-text-fill-color: var(--color);
    &[data-mask='1']{
      transition: background-size 0.06s ease-out;
      filter: blur(2px);
    }

    //&[data-type='img']{
    //  outline: 1px solid var(--bgcolor);
    //}
  }
  &[data-active='2']{
    -webkit-text-fill-color: var(--color);
    background-size: 100% calc(1em*2);
    // border-bottom: none;
  }


  &:hover{
    light-actions{
      display: block;
    }
  }

  pagenote-tag-edit{
    display: block;
    width: 100%;
    height: 100%;
  }
  pagenote-tip{
    display: block;
    background: #ffe5b0;
    padding: 8px;
    border: 1px solid #999;
  }
}

pagenote-notification{
  display: inline-block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: $notification-index;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  background: var(--color,#ffd581);
  color:#000;
  &[data-type='success']{
    background: #ffd581;
  }
  &[data-type='error']{
    background: #ff7b82;
  }
  &[data-status='fade']{
    animation: notification 3s ease-in-out forwards;
  }
}

@keyframes notification {
  0%{
    transform: translateY(0);
    opacity: 1;
  }
  //80%{
  //  transform: translateY(-16px);
  //  opacity: 1;
  //}
  100%{
    transform: translateY(-20px);
    opacity: 0;
  }
}


kbd{
  position: relative;
  top: -0.3em;
  display: inline-block;
  padding: .25em .5em .2em;
  margin-left: .25em;
  margin-right: .25em;
  font: 75%/1 monaco,menlo,consolas,"courier new",courier,monospace;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 3px;
  white-space: nowrap;
  word-wrap: normal;
  text-transform: capitalize;
  color: #555;
  background-color: #fefefe;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
  box-shadow: 0 2px 0 #ccc, 0 3px 1px #999, inset 0 1px 1px #fff;
}
